<template>
    <div class="login">
        <!-- element的表单验证 -->
        <el-form status-icon :model="loginModel" :rules="rules" ref="form" class="login-form">
            <div class="text-center">
                <img src="./../assets/logo.svg" style="width: 96px;" alt="">
                <h2 class="mt-3">人力资源管理系统</h2>
            </div>
            <el-form-item label="用户名" prop="username">
                <el-input v-model="loginModel.username" autocomplete="off" auto-complete="off" placeholder="用户名/工号/邮箱"
                          clearable  @keyup.enter.native="login">
                    <i slot="prefix" class="el-input__icon el-icon-user"></i>
                </el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="loginModel.password" autocomplete="off" placeholder="登录密码"
                          show-password @keyup.enter.native="login">
                    <i slot="prefix" class="el-input__icon el-icon-lock"></i>
                </el-input>
            </el-form-item>
            <div style="margin-top: 30px">
                <el-checkbox v-model="loginModel.autoLogin" size="medium">下次自动登录</el-checkbox>
                <el-link class="float-right" type="primary" @click="resetForm.visible = true">忘记密码?</el-link>
            </div>
            <el-form-item class="pt-3">
                <el-button class="w-100" type="primary" @click="login" :loading="showLoading">提交</el-button>
            </el-form-item>
        </el-form>
        <el-dialog :close-on-click-modal="false"
            title="提示"
            :visible.sync="resetForm.visible"
            width="500px">
            <el-form ref="updatePwdForm">
                <div v-show="resetForm.step == 0">
                    <el-form-item prop="email" label="邮箱地址">
                        <el-input v-model="resetForm.model.email" autocomplete="off" placeholder="请填写邮箱地址">
                            <el-button v-if="countDown == 0" @click="sendCode" type="success" slot="append" :loading="sending">发送{{sending?'中...':'验证码'}}</el-button>
                            <el-button v-else slot="append">重新发送({{countDown}}秒)</el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="token" label="验证码">
                        <el-input v-model="resetForm.model.token" autocomplete="off" placeholder="请填写验证码"/>
                    </el-form-item>
                    <div class="text-center">
                        <el-button type="primary" @click="resetForm.step ++">下一步</el-button>
                    </div>
                </div>
                <div v-show="resetForm.step != 0">
                    <el-form-item label="新密码" prop="newPassword">
                        <el-input type="password" v-model="resetForm.model.newPassword" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="重复新密码" prop="newPassword2">
                        <el-input type="password" v-model="resetForm.model.newPassword2" autocomplete="off"></el-input>
                    </el-form-item>
                    <div class="text-center">
                        <el-button type="primary" @click="resetForm.step --">上一步</el-button>
                        <el-button type="primary" @click="updatePwd">更新密码</el-button>
                    </div>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import {mapActions} from 'vuex'
import api, {post} from "@/services/api";
import data from "@/store/data";

export default {
    name: "Login",
    data() {
        return {
            countDown:0,
            sending:false,
            resetForm: {
                visible: false,
                step: 0,
                model: {
                    email: '',
                    token: '',
                    newPassword: '',
                    newPassword2: ''
                }
            },
            showLoading: false,
            loginModel: {
                username: '',
                password: '',
                autoLogin: false,
            },
            rules: {
                username: [
                    {required: true, message: '请输入登录账号', trigger: 'blur'},
                ],
                password: [
                    {required: true, message: '请输入登录密码', trigger: 'blur'},
                ],
            }
        }
    },
    methods: {
        // 将vuex中定义的action方法注入到本对象中
        ...mapActions(['saveLogin']),
        sendCode(){

            if(!this.resetForm.model.email){
                this.$message.info('请输入邮箱地址');
                return;
            }
            this.sending = true;
            api.get('/send-code',{email: this.resetForm.model.email}).then(ret=>{
                this.startCountDown()
            }).catch(e=>{
                this.$message.error(e.message || '发送验证码失败')
            }).finally(()=>{
                this.sending = false;
            })
        },
        startCountDown(){
            this.countDown = 10;
            const timer = setInterval(()=>{
                this.countDown --;
                if(this.countDown <= 0){
                    // 结束倒计时
                    clearInterval(timer);
                }
            },1000);
        },
        updatePwd() {
            api.get('/update-pwd',this.resetForm.model).then(ret=>{
                this.resetForm.visible = false;
                this.$message.info('修改密码成功')
            });
        },
        login() {
            this.$refs.form.validate(valid => {
                if (!valid) {
                    // 未通过
                    return;
                }
                // 显示loading
                this.showLoading = true;
                // 执行登录操作
                post('/login', this.loginModel, 'form')
                    .then(result => { // 正确的返回结果
                        // 使用mutation进行提交
                        // this.$store.commit('saveEmployeeInfo',result.employee)
                        this.saveLogin(result);
                        this.$router.push('/') // 跳转到首页
                    }).catch(e => { // 执行失败的结果
                    this.$message({
                        message: e.message,
                        type: 'warning'
                    })
                }).finally(() => {
                    this.showLoading = false;
                })
            })

            //
        }
    }
}
</script>

<style scoped lang="less">
.login {
    width: 100%;
    height: 100vh;
    background: url(./../assets/login_bg.svg) no-repeat;
}

.login-form {
    width: 400px;
    margin: auto;
    padding-top: 5%;
}
</style>